<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        *{
            margin: 0;
            padding: 0;
        }

        img {
            display: block;
            margin-bottom: 50px;
            height: 300px;
            border: solid 1px;
        }
    </style>
</head>
<body>
<img src="img/loading.jpg" data-src="./img/img1.png" alt="">
<img src="img/loading.jpg" data-src="./img/img2.png" alt="">
<img src="img/loading.jpg" data-src="./img/img3.png" alt="">
<img src="img/loading.jpg" data-src="./img/img4.png" alt="">
<img src="img/loading.jpg" data-src="./img/img5.png" alt="">
<img src="img/loading.jpg" data-src="./img/img6.png" alt="">
<img src="img/loading.jpg" data-src="./img/img7.png" alt="">
<img src="img/loading.jpg" data-src="./img/img8.png" alt="">
<img src="img/loading.jpg" data-src="./img/event.png" alt="">
<script>
    const domImages = document.getElementsByTagName('img');
    let loadIndex = 0;

    function lazyLoad() {
        // 容器可视区域高度
        let clientHeight = document.documentElement.clientHeight;
        // 容器滚动的高度
        let scrollTop = document.documentElement.scrollTop;
        [...domImages].forEach((item, index) => {
            const offsetTop = item.offsetTop;
            if (offsetTop < clientHeight + scrollTop && (index >= loadIndex)) {
                item.src = item.getAttribute('data-src');
                loadIndex++;
            }
        });
    }

    lazyLoad();
    window.onscroll = lazyLoad;
</script>
</body>
</html>